<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="referrer" content="no-referrer" />
    <meta name="theme-color" content="#1d1e24" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover"
    />
    <meta property="og:title" content="G9.GAME" />
    <meta property="og:type" content="game" />
    <meta property="og:image" content="/logo.png" />
    <!-- pwa最小配置 -->
    <!-- <meta name="theme-color" content="#000000" /> -->
    <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
    <meta name="description" content="G9.GAME - The Ultimate Gaming Experience" />
    <link rel="icon" type="image/svg+xml" href="/favicon-s2.svg" />
    <link rel="icon" type="image/png" href="/imgs/pwa/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="/imgs/pwa/favicon-16x16.png" sizes="16x16" />
    <link rel="apple-touch-icon" href="/imgs/pwa/apple-touch-icon.png" sizes="180x180" />
    <link rel="mask-icon" href="/logo.png" color="#FFFFFF" />

    <!-- <title>%VITE_APP_NAME%</title> -->
    <title>G9.GAME</title>

    <!-- <link rel="manifest" href="/manifest.json" /> -->
    <link rel="dns-prefetch" href="//polyfill.alicdn.com" />
    <link rel="dns-prefetch" href="//cdn.g9.game" />
    <link rel="stylesheet" href="/sports/font-icomoon.css" media="print" onload="this.media='all'" />

    <script defer src="/libs/echarts@5.0.0.js?t=20240627"></script>
    <script defer src="/libs/swiper.js?t=20240627"></script>
    <script defer src="/libs/lottie.min.js?t=20240829"></script>
    <script defer src="/libs/telegram-web-app@7.8.js?t=20240829"></script>
    <script src="https://polyfill.alicdn.com/v3/polyfill.min.js?ua=modern"></script>
    <script src="/js/polyfill.js?t=1723521265471"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
    <script>
      eruda.init();
    </script> -->

    <!-- Start of LiveChat (www.livechat.com) code -->
    <script>
      window.__lc = window.__lc || {};
      window.__lc.license = 18676065;
      window.__lc.integration_name = 'manual_onboarding';
      window.__lc.product_name = 'G9.GAME';
      window.__lc.asyncInit = false;
      (function (n, t, c) {
        function i(n) {
          return e._h ? e._h.apply(null, n) : e._q.push(n);
        }
        var e = {
          _q: [],
          _h: null,
          _v: '2.0',
          on: function () {
            i(['on', c.call(arguments)]);
          },
          once: function () {
            i(['once', c.call(arguments)]);
          },
          off: function () {
            i(['off', c.call(arguments)]);
          },
          get: function () {
            if (!e._h) throw new Error("[LiveChatWidget] You can't use getters before load.");
            return i(['get', c.call(arguments)]);
          },
          call: function () {
            i(['call', c.call(arguments)]);
          },
          init: function () {
            var n = t.createElement('script');
            (n.async = !0),
              (n.type = 'text/javascript'),
              (n.src = 'https://cdn.livechatinc.com/tracking.js'),
              t.head.appendChild(n);
          },
        };
        !n.__lc.asyncInit && e.init(), (n.LiveChatWidget = n.LiveChatWidget || e);
      })(window, document, [].slice);
    </script>

    <!--<script>-->
    <!--  function updateScale(scale) {-->
    <!--    const meta = document.querySelector('meta[name="viewport"]');-->
    <!--    meta.content = `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`;-->
    <!--  }-->

    <!--  function onResize() {-->
    <!--    const clientWidth = window.outerWidth;-->

    <!--    if (clientWidth < 360) {-->
    <!--      updateScale(0.9);-->
    <!--    } else if (clientWidth < 380) {-->
    <!--      updateScale(0.95);-->
    <!--    } else {-->
    <!--      updateScale(1);-->
    <!--    }-->
    <!--  }-->

    <!--  window.addEventListener('resize', onResize);-->
    <!--  onResize();-->
    <!--</script>-->
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
    <style>
      #app:empty ~ .app-loading {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 999999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #848a9d;
        background-color: #1d1e24;
      }

      .mascot {
        width: 300px;
        height: 180px;
        margin-bottom: 16px;
        object-fit: contain;
      }

      .dotting {
        display: inline-block;
        min-width: 2px;
        min-height: 2px;
        margin-right: 8px;
        box-shadow:
          2px 0 currentColor,
          6px 0 currentColor,
          10px 0 currentColor;
        animation: dot 1.5s infinite step-start both;
      }

      .dotting::before {
        content: '';
      }

      @keyframes dot {
        25% {
          box-shadow: none;
        }

        50% {
          box-shadow: 2px 0 currentColor;
        }

        75% {
          box-shadow:
            2px 0 currentColor,
            6px 0 currentColor;
        }
      }
    </style>
  </head>

  <body tabindex="-1">
    <div id="app"></div>

    <div class="app-loading hidden">
      <img class="mascot" src="/imgs/mascot-motion.png" />
      <div class="loading">LOADING<span class="dotting"></span></div>
    </div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
